<!DOCTYPE html>
<html>

<head>
  <title>vue 状态管理 vuex</title>
  <script src="./static/js/vue.min.js"></script>
  <script src="./static/js/vuex.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ count }}
      <button @click="inc">+</button>
      <button @click="dec">-</button>
    </p>
  </div>


  <script>
    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        inc: (state) => { state.count++ },
        dec: (state) => { state.count-- }
      }
    })
    const app = new Vue({
      el: "#app",
      computed: {
        count() {
          return store.state.count
        }
      },
      methods: {
        inc() {
          store.commit('inc')
        },
        dec() {
          store.commit('dec')
        }
      }
    })
  </script>

</body>

</html>
